<style>
    body{ 
        overflow: hidden;
    }
    .layout{
        background: #f5f7f9;
        position: relative;
    }
    .layout-app-btn{
        width: 50px;
        height: 30px;
        float: left;
        position: relative;
        left: 20px;
    }
    .layout-logo{
        width: 100px;
        height: 40px;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 10px;
    }
    .layout-logo img {
        height: 100%;
    }
    .layout-content{
        width: 100px;
        height: 30px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-nav{
        width: 550px;
        margin: 0 auto;
        margin-right: 20px;
    }

    .info-menu-sign-in {
        cursor: pointer;
        display: inline-block;
        margin-right: 8px;
    }
    .info-menu-sign-in button.ivu-btn {
        padding-left: 0;
        padding-right: 0;
    }
</style>
<template>
    <div class="layout" style="">
        <Row>
            <Col span="24" :style="{height:'60px'}">
                <Menu mode="horizontal" theme="dark" active-name="1" :style="{position: 'fixed',width:'100%'}">
                    <div class="layout-logo">
                        <img src="https://file.iviewui.com/dist/e1cf12c07bf6458992569e67927d767e.png">
                    </div>
                    <div class="layout-app-btn">
                        <Button shape="circle" icon="md-menu" @click="value2 = true"></Button>
                    </div>
                    <div class="layout-content">
                        
                    </div>
                    <div class="layout-nav">
                        <MenuItem name="3-1">当前版本：V1020202R100</MenuItem>
                        <Submenu name="3">
                            <template slot="title">
                                切换版本
                            </template>
                            <MenuGroup title="其他版本">
                                <MenuItem name="3-1">新增和启动</MenuItem>
                                <MenuItem name="3-2">活跃分析</MenuItem>
                                <MenuItem name="3-3">时段分析</MenuItem>
                            </MenuGroup>
                        </Submenu>
                        <div class="layout-app-btn" style="margin-left:0px">
                            <Button shape="circle" icon="ios-person" type="success"></Button>
                        </div>
                        <Submenu name="4">
                            <template slot="title">
                                twx223386
                            </template>
                            <MenuGroup title="账户操作">
                                <MenuItem name="4-1">注销</MenuItem>
                            </MenuGroup>
                        </Submenu>
                        
                    </div>
                </Menu>
            </Col>
        </Row>
        <Row v-bind:style="{height: dynHeight}" style="overflow-y: auto;">
            <Col span="24">
                <router-view></router-view>
            </Col>
        </Row>
        

        <Drawer title="当前位置 ： 项目看板" placement="left" :closable="false" v-model="value2">
            <Timeline>
                <TimelineItem>
                    <p class="time">通用</p>
                    <div class="info-menu-sign-in" style="margin-top:10px">
                        <span style="background-color: #5cadff;" class="ivu-avatar ivu-avatar-circle ivu-avatar-default ivu-avatar-icon">
                            <Icon type="ios-desktop-outline" />
                        </span> 
                        <button type="button" class="ivu-btn ivu-btn-text ivu-btn-large">
                            <span>项目看板</span>
                        </button>
                    </div>
                    <div class="info-menu-sign-in" style="margin-top:10px">
                        <span style="background-color: #ff9900;" class="ivu-avatar ivu-avatar-circle ivu-avatar-default ivu-avatar-icon">
                            <Icon type="ios-list" />
                        </span> 
                        <button type="button" class="ivu-btn ivu-btn-text ivu-btn-large">
                            <span>任务管理</span>
                        </button>
                    </div>
                </TimelineItem>
                <TimelineItem>
                    <p class="time">研发过程管理</p>
                    <div class="info-menu-sign-in" style="margin-top:10px">
                        <span style="background-color: #19be6b;" class="ivu-avatar ivu-avatar-circle ivu-avatar-default ivu-avatar-icon">
                            <Icon type="ios-briefcase-outline" />
                        </span> 
                        <button type="button" class="ivu-btn ivu-btn-text ivu-btn-large">
                            <span>需求管理</span>
                        </button>
                    </div>
                    <div class="info-menu-sign-in" style="margin-top:10px" v-on:click="gotoChildModule('DTS')">
                        <span style="background-color: #ed4014;" class="ivu-avatar ivu-avatar-circle ivu-avatar-default ivu-avatar-icon">
                            <Icon type="ios-bug-outline" />
                        </span> 
                        <button type="button" class="ivu-btn ivu-btn-text ivu-btn-large">
                            <span>问题单管理</span>
                        </button>
                    </div>
                    <div class="info-menu-sign-in" style="margin-top:10px">
                        <span style="background-color: #87d068;" class="ivu-avatar ivu-avatar-circle ivu-avatar-default ivu-avatar-icon">
                            <Icon type="ios-calendar-outline" />
                        </span> 
                        <button type="button" class="ivu-btn ivu-btn-text ivu-btn-large">
                            <span>迭代计划管理</span>
                        </button>
                    </div>
                </TimelineItem>
                <TimelineItem>
                    <p class="time">系统</p>
                    <div class="info-menu-sign-in" style="margin-top:10px">
                        <span style="background-color: #515a6e;" class="ivu-avatar ivu-avatar-circle ivu-avatar-default ivu-avatar-icon">
                            <i class="ivu-icon ivu-icon-ios-person"></i>
                        </span> 
                        <button type="button" class="ivu-btn ivu-btn-text ivu-btn-large">
                            <span>数据同步</span>
                        </button>
                    </div>
                </TimelineItem>
            </Timeline>
        </Drawer>
    </div>
</template>
<script>
    export default {
        created(){
            this.dynHeight=document.documentElement.clientHeight-60+"px";
            //初始化需求树
            // this.$router.push({ name: 'work'});
        },
        data () {
            return {
                value2: false,
                dynHeight:''
            }
        },
        methods: {
            // 跳转至子模块
            gotoChildModule(childModuleIndex){
                this.value2 = false;
                if(childModuleIndex == 'DTS' ){
                    this.$router.push({ name: '/dts'});
                }
                
            }
        }
    }
</script>